<!-- Header -->
<div class="header bg-primary pb-6">
  <div class="container-fluid">
    <div class="header-body">
      
      <!-- Card stats -->
      <div class="row">
        <div class="col-xl-3 col-md-6">
          <div class="card card-stats">
            <!-- Card body -->
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">本月收入</h5>
                  <span class="h2 font-weight-bold mb-0">{{.data.MonthAmount}}</span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape bg-gradient-red text-white rounded-circle shadow">
                    <i class="ni ni-money-coins"></i>
                  </div>
                </div>
              </div>
              <p class="mt-3 mb-0 text-sm">
                <span class="text-success mr-2"></span>
                <span class="text-nowrap">支付数据</span>
              </p>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6">
          <div class="card card-stats">
            <!-- Card body -->
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">未处理工单数量</h5>
                  <span class="h2 font-weight-bold mb-0">{{.data.OpenTicketCount}}</span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape bg-gradient-orange text-white rounded-circle shadow">
                    <i class="ni ni-chat-round"></i>
                  </div>
                </div>
              </div>
              <p class="mt-3 mb-0 text-sm">
                <span class="text-success mr-2"></span>
                <span class="text-nowrap">工单数据</span>
              </p>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6">
          <div class="card card-stats">
            <!-- Card body -->
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">节点数量</h5>
                  <span class="h2 font-weight-bold mb-0">{{.data.ServiceCount}}</span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape bg-gradient-green text-white rounded-circle shadow">
                    <i class="ni ni-atom"></i>
                  </div>
                </div>
              </div>
              <p class="mt-3 mb-0 text-sm">
                <span class="text-success mr-2"></span>
                <span class="text-nowrap">节点数据</span>
              </p>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6">
          <div class="card card-stats">
            <!-- Card body -->
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="card-title text-uppercase text-muted mb-0">本月注册量</h5>
                  <span class="h2 font-weight-bold mb-0">{{.data.MonthUserCount}}</span>
                </div>
                <div class="col-auto">
                  <div class="icon icon-shape bg-gradient-info text-white rounded-circle shadow">
                    <i class="ni ni-single-02"></i>
                  </div>
                </div>
              </div>
              <p class="mt-3 mb-0 text-sm">
                <span class="text-success mr-2"></span>
                <span class="text-nowrap">用户数据</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid mt--6">
  <div class="row">
    <div class="col-xl-12">
      <div class="card">
        <div class="card-header bg-transparent">
          <div class="row align-items-center">
            <div class="col">
              数据  
            </div>
          </div>
        </div>
        <div class="card-body">
          <!-- Chart -->
          <div class="chart">
            <!-- Chart wrapper -->
            <canvas id="chart-sales-dark" class="chart-canvas" style="height: 100%;"></canvas>
          </div>
        </div>
      </div>
    </div>
    
  </div>
  <div class="row">
   
    <div class="col-xl-12">
      <!-- Progress track -->
      <div class="card">
        <!-- Card header -->
        <div class="card-header bg-transparent">
          <div class="row align-items-center">
            <div class="col">
              流量使用排行榜
            </div>
            <div class="col">
              <ul class="nav nav-pills justify-content-end">
                <li class="nav-item mr-2 mr-md-0" >
                  <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab" onclick="nowFlow()">
                    <span class="d-none d-md-block">今日流量</span>
                  </a>
                </li>
                <li class="nav-item" >
                  <a href="#" class="nav-link py-2 px-3" data-toggle="tab" onclick="reduce1Flow()">
                    <span class="d-none d-md-block">昨日流量</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- Card body -->
        <div class="card-body" >
          <!-- List group -->
          <ul class="list-group list-group-flush list my--3" id="flow_top_ul">
            
          </ul>
        </div>
      </div>
    </div>
  </div>
 
  <!-- Footer -->
  <footer class="footer pt-0">
    <div class="row align-items-center justify-content-lg-between">
      <div class="col-lg-6">
        <div class="copyright text-center text-lg-left text-muted">
          &copy; 2024 <a href="https://github.com/pingProMax/gov2panel" class="font-weight-bold ml-1" target="_blank">20240726</a>
        </div>
      </div>
      <div class="col-lg-6">
        <ul class="nav nav-footer justify-content-center justify-content-lg-end">
          <li class="nav-item">
            <a href="https://github.com/pingProMax/gov2panel" class="nav-link" target="_blank">使用文档</a>
          </li>
          <li class="nav-item">
            <a href="https://github.com/pingProMax/gov2panel/issues" class="nav-link" target="_blank">提交bug</a>
          </li>
          
        </ul>
      </div>
    </div>
  </footer>
</div>